<template>
  <div>
    <!-- <div v-for="(items,indexs) in arr" :key="indexs"> -->
    <!-- class="dialog-wrap"
      modal-class="modal-wrap"
      :modal="false"
      :lock-scroll="false" draggable -->
    <el-dialog :title="title" align-center v-model="open" :close-on-click-modal="false" width="50%"
      :before-close="cancel">
      <div style="position: relative;">
        <div style="display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: 600;">
          <div class="mr30">项目：{{form.project}}</div>
          <div>日期：{{form.selectDate}}</div>
        </div>
        <div ref="analysisIntance" style="height: 500px;" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="actionDialog">
  import * as echarts from 'echarts';
  import { getPhpCountStatistics } from "@/api/deviceManage/index.js";
  const { proxy } = getCurrentInstance();
  const analysisIntance = ref();
  const emit = defineEmits(["cancel"]);
  const open = ref(false);
  const title = ref("自定义字段统计");
  const data = reactive({
    form: {
      project: '',
      selectDate: ''
    },
  });
  const { form } = toRefs(data);
  const getStatisticsApi = () => {
    getPhpCountStatistics(form.value).then(response => {
      // console.log(response, 'response');
      let data = response.data ? JSON.parse(response.data) : '';
      // console.log(data, 'data');
      if (data) {
        let list = Object.entries(data).map(([label, value]) => ({
          label: label,
          value: value
        }));
        getAnalysis(list);
      }else {
        getAnalysis([]);
      }
    }).catch(() => {
    });
  };
  const getAnalysis = (list) => {
    let analysisEcharts = echarts.init(analysisIntance.value);
    let nameData = list.length ? list.map(item => item.label) : [];
    let valueData = list.length ? list.map(item => item.value) : [];
    const option = {
      // color: ['#80FFA5', '#00DDFF', '#37A2FF'],
      title: {
        // text: 'Gradient Stacked Area Chart'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: true,
          data: nameData
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          },
          showSymbol: true,
          // barWidth: '50px',
          itemStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(128, 255, 165)'
              },
              {
                offset: 1,
                color: 'rgb(1, 191, 236)'
              }
            ])
          },
          data: valueData
        },
      ]
    };
    // console.log(option, 'option');
    option && analysisEcharts.setOption(option);
    window.addEventListener("resize", function () {
      analysisIntance.resize();
    });
  };

  function getCurrentDate() {
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0'); // 注意月份从0开始
    var yyyy = today.getFullYear();
    return `${yyyy}-${mm}-${dd}`;
  }
  function openDialog(row) {
    console.log(row, 'ABCDEFG-row');
    form.value.selectDate = row.selectDate || getCurrentDate();
    form.value.project = row.project || '';
    form.value.deviceGroup = row.deviceGroup || '';
    open.value = true;
    setTimeout(() => {
      getStatisticsApi();
    });
    // reset();
  }
  // 取消按钮
  function cancel() {
    proxy.resetForm("actionDialog");
    emit("cancel", false);
    open.value = false;
    // reset();
  }
  // setTimeout(() => {
  //   getAnalysis();
  // }, 1000);
  defineExpose({
    openDialog
  });
</script>
<style lang="scss" scoped>
  /* :deep(.modal-wrap) {
    pointer-events: none !important;
    margin-top: 50%;
  }

  :deep() {
    .dialog-wrap {
      pointer-events: auto !important;
      margin-top: 15vh !important;
    }

    .dialog-wrap2 {
      margin-top: 20vh !important;
    }
  } */

  :deep() {
    .el-dialog {
      pointer-events: auto !important;
      display: flex;
      flex-direction: column;
      margin: 0 !important;
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -40%);
      max-height: calc(100% - 60px);
      max-width: calc(100% - 30px);
    }

    .el-dialog .el-dialog__body {
      flex: 1;
      overflow: auto;
    }
  }
</style>
